<template>
  <el-table  :data="returnValueList"  row-key="id" @row-click="handleRowClick">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="返回参数名称" align="center" prop="returnName" />
    <el-table-column label="返回参数描述" align="center" prop="returnDesc" />
    <el-table-column label="业务是否可见" align="center" prop="isFrontpageVisible" :formatter="formatFrontPageVisible" />
    <el-table-column label="返回参数类型" align="center" prop="returnType" :formatter="formatParameterType" />
    <el-table-column label="返回参数格式" align="center" prop="returnFormat" />
    <el-table-column label="回填(绑定)组件" align="center"  prop="parameterValue">
      <template #default="scope" >
        <div v-show="showParameterInput(scope.row)">
<!--        <ComponentInput  :selectVariable="scope.row.componentId||''" @change="changeComponent" />-->
          <BindComponentInput :bindComponent="scope.row.componentId||''" :multiple="false" @change="changeComponent"/>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</template>

<script lang="ts" setup>
import {getCurrentInstance, ref, watch} from "vue";
import ComponentInput from "@/components/common/selector/component/ComponentInput.vue";
import BindComponentInput from "@/components/common/selector/bindcomponent/BindComponentInput.vue";
const { proxy } = getCurrentInstance();
const { parameter_type } = proxy.useDict("parameter_type");
const currentRow = ref({})
interface Props {
  returnValueList: object
}
const returnValueList = ref(props.returnValueList)
const props = defineProps<Props>()
interface Emits {
  (e: 'ok', val: object): void
  (e: 'cancel'): void
}
const emits = defineEmits<Emits>()
watch(() => [props.returnValueList], () => {

    returnValueList.value = props.returnValueList;

  console.log('returnValueList in InterfaceParameter.vue', JSON.stringify(returnValueList.value))
}, { immediate: true })

function submitForm(){
  //debugger;
  console.log('returnValueList in InterfaceReturnValue.vue', JSON.stringify(returnValueList.value))
  emits('ok', returnValueList.value);
}
function cancel(){
  emits('cancel');
}

/**
 * 改变当前行组件
 * @param value
 */
function changeComponent(value){
  currentRow.value.componentId = "${"+value+"}";
}

/**
 * 记录当前行
 */
function handleRowClick(row, column, event){
  currentRow.value = row;
}
/**
 * 翻译参数类型
 * @param row
 * @param column
 * @returns {*|string}
 */
function  formatParameterType(row, column){
  return parameter_type.value.find(k => k.value === row.returnType)?.label ?? '';
}
/**
 * 翻译业务是否可见
 * @param row
 * @param column
 * @returns {*|string}
 */
function  formatFrontPageVisible(row, column){
  if(row.isFrontpageVisible=='Y'){
    return '是'
  }else{
    return '否';
  }
}
/**
 * 显示参数输入框
 * @param row
 */
function showParameterInput(row){
  // if(row.parameterType!='object' && row.parameterType!='array'){
  //   return true;
  // }else{
  //   return false;
  // }
  return true;
}

</script>

<style scoped>

</style>
